// src/components/ObliqueParams.tsx
import React, { useState, useEffect } from "react";
import type { CameraParams } from "./utils";

import { C_FACTOR } from "./utils";

// 新增：定义无人机型号类型
export type DroneModel = "3TD" | "4TD" | null;

interface ObliqueParamsProps {
  onParamsChange: (params: {
    altitude: number;
    gsd: number;
    frontalOverlap: number;
    sideOverlap: number;
    speed: number;
    angle: number;
    tiltAngle: number;
    buffer: number;
    autoAngleEnabled: boolean;
    isSmartObliqueEnabled: boolean; // 新增智能摆动拍摄开关
    droneModel: DroneModel; // 新增无人机型号
  }) => void;
  cameraParams: CameraParams;
  calculatedAutoAngle: number | null;
}

const ObliqueParams: React.FC<ObliqueParamsProps> = ({
  onParamsChange,
  cameraParams,
  calculatedAutoAngle,
}) => {
  const [altitude, setAltitude] = useState(120);
  const [gsd, setGsd] = useState(0);
  const [frontalOverlap, setFrontalOverlap] = useState(80);
  const [sideOverlap, setSideOverlap] = useState(75);
  const [speed, setSpeed] = useState(8);
  const [angle, setAngle] = useState(0);
  const [tiltAngle, setTiltAngle] = useState(60); // 相机与地面的夹角，90度为垂直
  const [buffer, setBuffer] = useState(50); // 缓冲区距离
  const [autoAngleEnabled, setAutoAngleEnabled] = useState(false);

  // 新增智能摆动拍摄相关状态
  const [isSmartObliqueEnabled, setIsSmartObliqueEnabled] = useState(false);
  const [droneModel, setDroneModel] = useState<DroneModel>("3TD"); // 默认3TD

  // 计算 GSD 的 C_FACTOR
  const currentCFactor =
    (100 * cameraParams.SENSOR_WIDTH) /
    (cameraParams.IMAGE_WIDTH_PIXELS * cameraParams.FOCAL_LENGTH);

  // 初始化时根据默认航高计算GSD
  useEffect(() => {
    if (altitude > 0) {
      const calculatedGsd = currentCFactor * altitude;
      setGsd(parseFloat(calculatedGsd.toFixed(2)));
    }
  }, [altitude, currentCFactor]);

  // 每次参数变化时通知父组件
  useEffect(() => {
    onParamsChange({
      altitude,
      gsd,
      frontalOverlap,
      sideOverlap,
      speed,
      angle:
        autoAngleEnabled && calculatedAutoAngle !== null
          ? calculatedAutoAngle
          : angle,
      tiltAngle,
      buffer,
      autoAngleEnabled,
      isSmartObliqueEnabled, // 传递新状态
      droneModel, // 传递新状态
    });
  }, [
    altitude,
    gsd,
    frontalOverlap,
    sideOverlap,
    speed,
    angle,
    tiltAngle,
    buffer,
    autoAngleEnabled,
    calculatedAutoAngle,
    isSmartObliqueEnabled, // 添加依赖
    droneModel, // 添加依赖
    onParamsChange,
  ]);

  const handleAltitudeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newAltitude = parseFloat(e.target.value);
    if (!isNaN(newAltitude) && newAltitude > 0) {
      setAltitude(newAltitude);
      const calculatedGsd = currentCFactor * newAltitude;
      setGsd(parseFloat(calculatedGsd.toFixed(2)));
    }
  };

  const handleGsdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newGsd = parseFloat(e.target.value);
    if (!isNaN(newGsd) && newGsd > 0) {
      setGsd(newGsd);
      const calculatedAltitude = newGsd / currentCFactor;
      setAltitude(Math.round(calculatedAltitude));
    }
  };

  // 确定哪些参数在智能摆动拍摄模式下，且为4TD机型时被禁用
  const disableTiltAndOverlap = isSmartObliqueEnabled && droneModel === "4TD";

  return (
    <div className="mission-params">
      <h4 className="text-[#007bff] mt-5 mb-2 pb-1 border-b border-dashed border-[#4a4a4a] text-base font-semibold">
        倾斜摄影参数
      </h4>

      {/* 智能摆动拍摄开关 */}
      <div className="param-group mb-4">
        <div className="flex items-center mt-2">
          <input
            type="checkbox"
            id="smart-oblique-checkbox"
            checked={isSmartObliqueEnabled}
            onChange={(e) => setIsSmartObliqueEnabled(e.target.checked)}
            className="mr-2 h-4 w-4 text-[#007bff] rounded focus:ring-[#007bff] bg-[#3a3a3a] border-[#4a4a4a]"
          />
          <label
            htmlFor="smart-oblique-checkbox"
            className="text-sm text-[#c0c0c0]"
          >
            智能摆动拍摄
          </label>
        </div>
      </div>

      {/* 无人机型号选择 (仅当智能摆动拍摄启用时显示) */}
      {isSmartObliqueEnabled && (
        <div className="param-group mb-4 pl-4 border-l border-[#4a4a4a] ml-2">
          <label className="block mb-2 text-sm text-[#c0c0c0] font-medium">
            选择无人机型号:
          </label>
          <div className="flex space-x-4">
            <div className="flex items-center">
              <input
                type="radio"
                id="drone-3td"
                name="droneModel"
                value="3TD"
                checked={droneModel === "3TD"}
                onChange={() => setDroneModel("3TD")}
                className="mr-2 h-4 w-4 text-[#007bff] focus:ring-[#007bff] bg-[#3a3a3a] border-[#4a4a4a]"
              />
              <label htmlFor="drone-3td" className="text-sm text-[#c0c0c0]">
                3TD (模拟摆动)
              </label>
            </div>
            <div className="flex items-center">
              <input
                type="radio"
                id="drone-4td"
                name="droneModel"
                value="4TD"
                checked={droneModel === "4TD"}
                onChange={() => setDroneModel("4TD")}
                className="mr-2 h-4 w-4 text-[#007bff] focus:ring-[#007bff] bg-[#3a3a3a] border-[#4a4a4a]"
              />
              <label htmlFor="drone-4td" className="text-sm text-[#c0c0c0]">
                4TD (自带摆动)
              </label>
            </div>
          </div>
          <small className="block mt-1 text-xs text-[#808080]">
            （4TD机型将由无人机自动优化相机参数）
          </small>
        </div>
      )}

      <div className="param-group mb-4">
        <label
          htmlFor="oblique-altitude"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航高 (m):
        </label>
        <input
          type="number"
          id="oblique-altitude"
          value={altitude}
          onChange={handleAltitudeChange}
          min="10"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-gsd"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          GSD (cm/pixel):
        </label>
        <input
          type="number"
          id="oblique-gsd"
          value={gsd}
          onChange={handleGsdChange}
          min="0.1"
          step="0.01"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （输入GSD或航高，另一个将自动计算）
        </small>
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-frontal-overlap"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航向重叠 (%):
        </label>
        <input
          type="number"
          id="oblique-frontal-overlap"
          value={frontalOverlap}
          onChange={(e) => setFrontalOverlap(parseFloat(e.target.value))}
          min="50"
          max="95"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
          disabled={disableTiltAndOverlap} // 禁用
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-side-overlap"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          旁向重叠 (%):
        </label>
        <input
          type="number"
          id="oblique-side-overlap"
          value={sideOverlap}
          onChange={(e) => setSideOverlap(parseFloat(e.target.value))}
          min="50"
          max="95"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
          disabled={disableTiltAndOverlap} // 禁用
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-speed"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          飞行速度 (m/s):
        </label>
        <input
          type="number"
          id="oblique-speed"
          value={speed}
          onChange={(e) => setSpeed(parseFloat(e.target.value))}
          min="1"
          max="15"
          step="0.1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-angle"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航线角度 (度):
        </label>
        <input
          type="number"
          id="oblique-angle"
          value={
            autoAngleEnabled && calculatedAutoAngle !== null
              ? calculatedAutoAngle.toFixed(0)
              : angle
          }
          onChange={(e) => setAngle(parseFloat(e.target.value))}
          min="0"
          max="180"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
          disabled={autoAngleEnabled}
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （0度为正北方向，顺时针旋转）
        </small>
        <div className="flex items-center mt-2">
          <input
            type="checkbox"
            id="auto-angle-checkbox"
            checked={autoAngleEnabled}
            onChange={(e) => setAutoAngleEnabled(e.target.checked)}
            className="mr-2 h-4 w-4 text-[#007bff] rounded focus:ring-[#007bff] bg-[#3a3a3a] border-[#4a4a4a]"
          />
          <label
            htmlFor="auto-angle-checkbox"
            className="text-sm text-[#c0c0c0]"
          >
            自动计算航线角度 (沿最长边)
          </label>
        </div>
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-tilt-angle"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          倾斜角度 (度):
        </label>
        <input
          type="number"
          id="oblique-tilt-angle"
          value={tiltAngle}
          onChange={(e) => setTiltAngle(parseFloat(e.target.value))}
          min="30"
          max="80"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
          disabled={disableTiltAndOverlap} // 禁用
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （相机与地面的夹角，90度为垂直）
        </small>
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="oblique-buffer"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          缓冲区 (m):
        </label>
        <input
          type="number"
          id="oblique-buffer"
          value={buffer}
          onChange={(e) => setBuffer(parseFloat(e.target.value))}
          min="0"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （向外扩展的距离，保证立面覆盖）
        </small>
      </div>
    </div>
  );
};

export default ObliqueParams;
